<template>
  <a-modal
      :visible="financialVisible"
      title='绑定金财账户'
      okText='添加'
      @cancel="financeAccountCancel"
      :destroyOnClose="true"
      @ok="financialOk"
  >
    <div>
      <div>
        添加绑定
      </div>

      <a-form
          labelAlign='left'
          :labelCol="{
              span: 4
          }"
          :wrapperCol="{
              span: 20
          }"
          :form="financialForm"
      >
        <a-form-item label="账号">
          <a-input placeholder='请输入金财账号' v-decorator="['jcUserId', {rules: [{required: true,message: '请输入金财账号!'}]}]"/>
        </a-form-item>
        <a-form-item label="密码">
          <a-input type="password" placeholder='请输入密码'
                   v-decorator="['jcPassword', {rules: [{required: true,message: '请输入金财密码!'}]}]"/>
        </a-form-item>
      </a-form>

      <div>已绑定账号</div>

      <a-table
          :dataSource="financialTableData"
          :columns="financialTableColumns"
          :showHeader="false"
          :rowKey="(record) => record.JCGUID"
      >
        <template slot="username">
          <div>姓名:</div>
        </template>
        <template slot="jcUsername" slot-scope="text">
          <a-input :value="text" :disabled="true"/>
        </template>
        <template slot="action" slot-scope="text">
          <a-button style="background: #FE933D; color: #FFFFFF; width: 75px" @click="() => financialDeleteJc(text)">
            解绑
          </a-button>
        </template>
      </a-table>

    </div>
  </a-modal>
</template>

<script>
import {userJcAdd, userJcDelete, userJcGetList} from "@/api/approve/approve";
import {getLocalStorage, setLocalStorage} from "@/utils/localstore";
import MD5 from "js-md5";
import {Message} from 'ant-design-vue';

export default {
  name: "FinanceAccount",
  props: {
    financialVisible: {
      type: [Boolean],
    }
  },
  data() {
    return {
      financialTableData: [],
      financialTableColumns: [
        {
          title: '用户名',
          dataIndex: null,
          align: 'center',
          scopedSlots: {
            customRender: 'username'
          }
        },
        {
          title: '用户名',
          dataIndex: 'JCNAME',
          align: 'center',
          width: '300px',
          scopedSlots: {
            customRender: 'jcUsername'
          }
        },
        {
          title: '操作',
          dataIndex: 'JCGUID',
          align: 'center',
          scopedSlots: {
            customRender: 'action'
          }
        }
      ].map(column => {
        column.customCell = () => {
          return {
            style: {
              borderBottom: 'unset',
              background: '#F0FAFF'
            },
          };
        };
        return column;
      }),
      financialForm: this.$form.createForm(this, {name: 'financialForm'})
    }
  },
  watch: {
    financialVisible: {
      deep: true,
      handler: function (value) {
        value && this.getUserJcGetList();
      }
    }
  },
  async created() {
    await this.getUserJcGetList();
  },
  methods: {
    financeAccountCancel() {
      this.$emit('update:financialVisible', false);
    },
    async getUserJcGetList() {
      await userJcGetList({
        userId: getLocalStorage('userId')
      }).then(res => {
        const {success, data} = res
        if (success) {
          this.financialTableData = data
          if (data.length > 0) {
            const filterData = [...data].map(item => {
              item.code = item.JCCODE;
              item.guid = item.JCGUID;
              item.name = item.JCNAME;
              return item;
            })
            if (data.length === 1) {
              setLocalStorage('guid', data[0].guid);
            }
            setLocalStorage('guidList', JSON.stringify(filterData));
          }
        } else {
          localStorage.removeItem('guid');
          this.financialTableData = []
        }
      })
    },
    financialOk() {
      this.financialForm.validateFields(async (err, values) => {
        if (!err) {
          try {
            const {jcPassword, jcUserId} = values;
            await userJcAdd({
              userId: getLocalStorage('userId'),
              jcUserId,
              jcPassword: MD5(jcPassword)
            }).then(async res => {
              const {success} = res
              if (success) {
                Message.success(res.message)
                await this.getUserJcGetList()
              } else {
                Message.warning(res.message)
              }
            })
          } catch (e) {
            Promise.reject(err);
          }
        }
      })
    },
    async financialDeleteJc(text) {
      await userJcDelete({
        userId: getLocalStorage('userId'),
        jcGuid: text
      }).then(async res => {
        const {success, message} = res
        if (success) {
          Message.success(res.message)
          await this.getUserJcGetList()
        } else {
          Message.warning(message)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
